<template>
  <div class="gdzcpandian-list">
    <div class="header-actions">
      <span>
        <router-link
          style="
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
          "
          to="/main/xingzheng/gudingzichan/gdzcpandian"
          ><el-button>返回</el-button></router-link
        >
      </span>
      <span>
        <h2>固定资产盘点表列表</h2>
      </span>
    </div>
    <div class="search-container">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="资产编号">
          <el-input
            v-model="searchForm.assetCode"
            placeholder="请输入资产编号"
            clearable
          />
        </el-form-item>
        <el-form-item label="资产名称">
          <el-input
            v-model="searchForm.assetName"
            placeholder="请输入资产名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="所属部门">
          <el-input
            v-model="searchForm.department"
            placeholder="请输入所属部门"
            clearable
          />
        </el-form-item>
        <el-form-item label="管理责任人">
          <el-input
            v-model="searchForm.responsiblePerson"
            placeholder="请输入管理责任人"
            clearable
          />
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
          <el-button type="success" @click="handleAdd">新增盘点</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column prop="assetCode" label="资产编号" width="120" />
      <el-table-column prop="assetName" label="资产名称" width="120" />
      <el-table-column prop="department" label="所属部门" width="120" />
      <el-table-column prop="storageLocation" label="存放位置" width="120" />
      <el-table-column
        prop="responsiblePerson"
        label="管理责任人"
        width="100"
      />
      <el-table-column prop="initialCount" label="初盘数" width="80" />
      <el-table-column prop="recheckCount" label="复盘数量" width="80" />
      <el-table-column prop="sampleCount" label="抽盘数量" width="80" />
      <el-table-column prop="reviewer" label="审核人" width="100" />
      <el-table-column prop="createTime" label="创建时间" width="160">
        <template v-slot="scope">
          {{ formatDateTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="250" fixed="right">
        <template v-slot="scope">
          <el-button size="small" @click="handleView(scope.row)"
            >查看</el-button
          >
          <el-button size="small" type="primary" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button size="small" type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import {
  getFixedAssetInventoryList,
  deleteFixedAssetInventory,
} from "@/api/fixedAssetInventory";

export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      searchForm: {
        assetCode: "",
        assetName: "",
        department: "",
        responsiblePerson: "",
        dateRange: [],
      },
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    formatDateTime(date) {
      if (!date) return "";
      return new Date(date).toLocaleString();
    },
    async fetchData() {
      try {
        const params = {
          current: this.currentPage,
          size: this.pageSize,
          assetCode: this.searchForm.assetCode,
          assetName: this.searchForm.assetName,
          department: this.searchForm.department,
          responsiblePerson: this.searchForm.responsiblePerson,
        };

        if (
          this.searchForm.dateRange &&
          this.searchForm.dateRange.length === 2
        ) {
          params.startDate = this.searchForm.dateRange[0];
          params.endDate = this.searchForm.dateRange[1];
        }

        const response = await getFixedAssetInventoryList(params);
        this.tableData = response.data.records;
        this.total = response.data.total;
      } catch (error) {
        this.$message.error("获取列表失败：" + error.message);
      }
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    handleAdd() {
      this.$router.push("/main/xingzheng/gudingzichan/gdzcpandian");
    },
    handleView(row) {
      this.$router.push(
        `/main/xingzheng/gudingzichan/gdzcpandian?id=${row.id}&mode=view`
      );
    },
    handleEdit(row) {
      this.$router.push(
        `/main/xingzheng/gudingzichan/gdzcpandian?id=${row.id}`
      );
    },
    async handleDelete(row) {
      try {
        await this.$confirm("确认删除该记录吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });

        await deleteFixedAssetInventory(row.id);
        this.$message.success("删除成功");
        this.fetchData();
      } catch (error) {
        if (error !== "cancel") {
          this.$message.error("删除失败：" + error.message);
        }
      }
    },
    handleSearch() {
      this.currentPage = 1;
      this.fetchData();
    },
    handleReset() {
      this.searchForm = {
        assetCode: "",
        assetName: "",
        department: "",
        responsiblePerson: "",
        dateRange: [],
      };
      this.currentPage = 1;
      this.fetchData();
    },
  },
};
</script>

<style scoped>
.gdzcpandian-list {
  padding: 20px;
  width: 1200px;
  margin: 0 auto;
  min-height: calc(100vh - 40px);
}

.header-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.search-container {
  margin-bottom: 20px;
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pagination-container {
  margin-top: 20px;
  text-align: center;
}
</style>